<template>
  <!-- 成本分类 -->
    <div class="cost-type-wrap">
        <SearchBox @onReset="onReset" @onSearch="onSearch">
            <div class="search-item">
                <p class="search-item-label">项目名称搜索：</p>
                <el-input v-model="searchParams.input"
                :maxlength="50"
                 style="width: 340px" placeholder="请输入项目名称" />
            </div>
        </SearchBox>
        
        <TableBox :data="tableData" :columns="allColumns">
            <template v-slot:btn>
                <div class="btn-wrap" >
                    <el-button type="primary" @click="onAdd">新增</el-button>
                    <!-- <el-button type="primary">打印</el-button> -->
                </div>
            </template>
        </TableBox>
        <addType
         :visible="addVisible"
         :entry="entry"
         :data="rowData"
         @close="addVisible=false" 
         @confirm="onConfirm"/>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive,ref, onMounted } from 'vue'
import addType from './components/addType.vue'
import { apiCostItemsList, apiCostItemsDel } from '@/api/cost'

onMounted(() => {
  init()
})

let addVisible = ref(false)
let searchParams = reactive({
  input: ''
})
let tableData = ref([])
let rowData = ref({})
let entry = ref('')

const allColumns = reactive([
  {
    label: '#',
    type: 'index'
  },
  {
    label: '项目编码',
    key: 'itemCode'
  },
  {
    label: '项目名称',
    key: 'itemName'
  },
  {
    label: '项目说明',
    key: 'itemRemark'
  },
  {
    label: '在用标记',
    key: 'zyFlag',
  },
  {
    type: 'operations',
    fixed: 'right',
    width: 150,
    actions: (params) =>{
      // console.log('actions',params)
      let btnList = [
        {
          label: '编辑',
          click: () => {
            entry.value = 'edit'
            rowData.value = params.row
            addVisible.value = true
                    
          }  
        }]
      if(Number(params.row.itemFlag) === 1) {
        btnList.push({
          label: '停用',
          type: 'danger',
          click: () => handleDel(params.row)
        })
      }
      return btnList
    }
  }
])

// 初始化列表
const init = async (type) => {
  let res = false
  // if (type === 'search') {
  //   res = await apiPLCSearch({
  //     searchStr: searchParams.input
  //   })
  // } else {
  //   searchParams.input = ''
  res = await apiCostItemsList()
  // }
    
  tableData.value = res?.data || []
}
// 新增
const onAdd = () => {
  entry.value = 'add'
  rowData.value = {}
  addVisible.value = true
}
// 新增修改完成回调
const onConfirm = () => {
  init()
  addVisible.value = false
}
// 停用
const handleDel = ({itemCode}) => {
  ElMessageBox.confirm(`是否确认停用该项目？`,'提示',{
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    apiCostItemsDel({
      itemCode
    }).then(() => {
      init()
      ElMessage.success('操作成功')
    })
  })   
}
// 清空筛选条件，并查询
const onReset = () => {
  searchParams.input = ''
  onSearch()
}
// 查询
const onSearch = () => {
  init('search')
}

</script>

<style lang="scss" scoped>
.cost-type-wrap {
    .search-item-label {
        width: 100px;
    }
}
</style>